<template>
  <div class="home-main">
    <el-row class="btn-row">
      <el-button
        type="primary"
        @click="proRegisterShow"
        v-if="info.registrationType == '1' && !info.isSign"
        >报名入口</el-button
      >
      <el-button
        type="primary"
        @click="handleProRegister(joinUserInfo)"
        v-else-if="info.registrationType == '0' && !info.isSign"
        >点击加入</el-button
      >
      <el-button
        type="primary"
        v-else-if="info.registrationType == '1' && info.isSign"
        >已报名</el-button
      >
      <el-button
        type="primary"
        v-else-if="info.registrationType == '0' && info.isSign"
        >已加入</el-button
      >
      <div v-if="info.registrationType == '1'" class="time-box">
        报名时间：{{ info.registrationStartTime }} 至
        {{ info.registrationEndTime }}
      </div>
    </el-row>
    <el-tabs
      v-model="activeName"
      class="demo-tabs"
      @tab-click="handleClick"
      :before-leave="beforeHandle"
    >
      <el-tab-pane label="任务介绍" name="Info">
        <Info
          :projectId="projectId"
          v-if="projectId && activeName == 'Info'"
        ></Info>
      </el-tab-pane>
      <el-tab-pane label="阶段任务" name="Task">
        <Task
          :projectId="projectId"
          v-if="projectId && activeName == 'Task'"
        ></Task>
      </el-tab-pane>
      <el-tab-pane label="计划" name="Plan">
        <Plan
          :projectId="projectId"
          v-if="projectId && activeName == 'Plan'"
        ></Plan>
      </el-tab-pane>
      <el-tab-pane label="学习资料" name="Information">
        <Information
          :projectId="projectId"
          v-if="projectId && activeName == 'Information'"
        ></Information>
      </el-tab-pane>
      <el-tab-pane label="学习成果" name="Result">
        <Result
          :projectId="projectId"
          v-if="projectId && activeName == 'Result'"
        ></Result>
      </el-tab-pane>
      <el-tab-pane name="proRegister">
        <ProRegister
          :projectId="projectId"
          v-if="projectId && activeName == 'proRegister' && userInfo"
          :userInfo="userInfo"
          @confirm="handleProRegister"
        ></ProRegister>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup name="ProjectDetail">
import { ref } from "vue";
import Info from "./components/info.vue";
import Task from "./components/task.vue";
import Result from "./components/result.vue";
import Information from "./components/information.vue";
import ProRegister from "./proRegister.vue";
import { getProjectInfo, joinProject } from "@/api/home/home";
import { getUserProfile } from "@/api/system/user";
import Plan from "./components/plan.vue";
import { getToken } from "@/utils/auth";
const { proxy } = getCurrentInstance();

const route = useRoute();
const router = useRouter();

const activeName = ref("Info");

const projectId = ref("");
const proType = ref("");
const registerVisible = ref(false);
const userInfo = ref({});
const joinUserInfo = ref({});
const info = ref({});
function handleClick() {}
function beforeHandle() {
  if (activeName.value != "info") {
    if (!getToken()) {
      proxy.$modal.msgError("请登录");
      activeName.value = "Info";
      return false;
    } else if (!info.value.isSign && activeName.value != "proRegister") {
      activeName.value = "Info";
      proxy.$modal.msgError("请加入活动");
      return false;
    }
  }
}
//基本信息
function getInfo() {
  getProjectInfo({ id: projectId.value }).then((res) => {
    info.value = res.data;
  });
}

//打开报名
function proRegisterShow() {
  activeName.value = "proRegister";
}
//报名/加入
function handleProRegister(params) {
  // registerVisible.value = false;
  joinProject({ ...params, proId: projectId.value }).then((res) => {
    proxy.$modal.msgSuccess("报名成功");
    activeName.value = "Info";
    getInfo();
  });
}
function getUser() {
  getUserProfile().then((response) => {
    userInfo.value = response.data;
    joinUserInfo.value = {
      nickName: userInfo.value.nickName,
      email: userInfo.value.email,
      telephone: userInfo.value.telephone,
      unit: userInfo.value.unit,
      userId: userInfo.value.userId,
      status: "0",
    };
  });
}
onMounted(() => {
  projectId.value = route.query.projectId;
  proType.value = route.query.typeId;
  if (route.query.tabName) {
    activeName.value = route.query.tabName;
  }
  if (getToken()) {
    getUser();
  }
  getInfo();
});
</script>
<style scoped lang="scss">
.el-tabs {
  :deep(.el-tabs__item) {
    font-size: 16px;
    font-weight: bold;
  }
  :deep(.el-tabs__active-bar) {
    height: 5px;
    border-radius: 10px;
  }
}
.btn-row {
  margin: 10px 0;
  position: absolute;
  right: 0;
  top: -20px;
  z-index: 999;
  .el-button {
    padding: 20px 30px;
    font-size: 18px;
    background: linear-gradient(to right, #92c0ff, #3f92ff);
  }
}
.time-box {
  line-height: 50px;
  padding-left: 30px;
}
.home-main {
  position: relative;
  margin-top: 20px;
}
</style>